
<template>

  <div>
    <el-form :inline="true" :model="user" class="demo-form-inline" style="margin-top: 8px">
      <el-form-item label="">
        <el-input style="width: 150px" v-model="user.loginName" placeholder="名称"></el-input>
        <el-input style="width: 150px" v-model="user.username" placeholder="用户名"></el-input>
        <el-input style="width: 150px" v-model="user.email" placeholder="邮箱"></el-input>
        <el-input style="width: 150px" v-model="user.phonenumber" placeholder="电话"></el-input>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-button type="primary"  @click="tianjia">添加</el-button>
    </el-form>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%">

      <el-table-column
              prop="avatar"
              label="图片">
        <template slot-scope="scope"> <img :src="scope.row.avatar" width="80" height="80"></template>
      </el-table-column>
      <el-table-column
              prop="loginName"
              label="姓名">
      </el-table-column>
      <el-table-column
              prop="username"
              label="用户名">
      </el-table-column>
      <el-table-column
              prop="email"
              label="邮箱">
      </el-table-column>
      <el-table-column
              prop="phonenumber"
              label="电话号">
      </el-table-column>
      <el-table-column
              prop="sex"
              label="性别">
        <template slot-scope="scope">
          <p v-if="scope.row.sex == 0">男</p>
          <p v-else-if="scope.row.sex == 1">女</p>
          <p v-else-if="scope.row.sex == 2">未知</p>
        </template>
      </el-table-column>

      <el-table-column
              prop="status"
              label="账号状态">
        <template slot-scope="scope">
          <p v-if="scope.row.status == 0">正常</p>
          <p v-else-if="scope.row.status == 1">禁用</p>
        </template>
      </el-table-column>

      <el-table-column
              prop="createTime"
              label="日期">
      </el-table-column>

      <el-table-column
              width="300px"
              prop=""
              label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small"  @click="fengshen(scope.row.userId)">授予角色</el-button>
          <el-button type="danger" @click="del(scope.row.userId)">删除</el-button>
          <el-button type="success" @click="xiugai(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--为用户分配角色-->
    <el-dialog
            title="分配角色"
            :visible.sync="dialogVisible01"
            width="30%"
            :before-close="handleClose">
      <el-checkbox-group v-model="checkRole">
        <el-checkbox v-for="role in roles" :label="role.roleId+''" :key="role.roleId+''" style="width: 100px; float: left">{{role.roleName}}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible01 = false">取 消</el-button>
        <el-button type="primary" @click="confirmRoles">确 定</el-button>
      </span>
    </el-dialog>


    <!--分页条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog
            title="修改"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
      <el-form ref="user" :model="userForm" label-width="80px">
        <el-upload
                :model:="userForm.avatar"
                class="avatar-uploader"
                action="http://192.168.31.23:8086/system/api/user/upload"
                :headers="headerObj"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" style="width: 100px" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form-item label="姓名" prop="loginName">
          <el-input v-model="userForm.loginName"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话号" prop="phonenumber">
          <el-input v-model="userForm.phonenumber"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" >
                <el-radio-group v-model="userForm.sex" placeholder="请选择性别">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
                <el-radio label="2">未知</el-radio>
                </el-radio-group>
        </el-form-item>
        <el-form-item label="帐号状态"  style="width: 100%" prop="sex">
          <el-radio-group v-model="userForm.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker
                    v-model="userForm.createTime"
                    type="datetime"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width: 100%">
            </el-date-picker>
          </div>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="gai">确定修改</el-button>
        </span>
    </el-dialog>

    <el-dialog
            title="添加"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose">
      <el-form ref="user" :model="userForm2" label-width="80px">
        <el-upload
                class="avatar-uploader"
                action="http://192.168.31.23:8086/system/api/user/upload"
                :headers="headerObj"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" style="width: 100px" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form-item label="姓名" prop="loginName">
          <el-input v-model="userForm2.loginName"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm2.username"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" >
          <el-radio-group v-model="userForm2.sex" placeholder="请选择性别">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
            <el-radio :label="2">未知</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm2.email"></el-input>
        </el-form-item>
        <el-form-item label="电话号" prop="phonenumber">
          <el-input v-model="userForm2.phonenumber"></el-input>
        </el-form-item>
        <el-form-item label="帐号状态"  style="width: 100%" prop="sex">
          <el-radio-group v-model="userForm2.status">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker
                    v-model="userForm2.createTime"
                    type="datetime"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width: 100%">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="tian">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "User",
    data(){
      return {
        tableData:[],
        dialogVisible:false,
        dialogVisible2:false,
        userForm:{},
        userForm2:{},
        //当前显示的页码
        currentPage:1,
        //总条数
        total:0,
        //每页默认显示条数
        pageSize:5,
        user:{},
        imageUrl:"",
        //选中的id值
        checkRole:[],
        //所有的角色
        roles:[],
        dialogVisible01:false,
        userId:0,
        token:'',
      }
    },
    //页面加载完毕
    created() {
      this.initTable();
    },
    computed:{
      headerObj(){
        return{
          token:this.token
        }
      }
    },
    mounted() {
      this.token=window.localStorage.getItem("token")
    },
    //定义方法得地方
    methods:{
      initTable(){
        this.$http.post("/system/api/user/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.user).then(resp=>{
          console.log(resp)
          if(resp.data.code==2000){
            this.tableData=resp.data.data.list;
            this.total=resp.data.data.total;
          }else if (resp.data.code==4001){
            this.$message.error("未登录");
            this.$router.push("/login");
          }

        })
      },
      fengshen(userId){
        this.userId=userId;
        this.dialogVisible01=true;
        this.$http.get("/system/api/user/list?userId="+userId).then(resp=>{
          this.roles=resp.data.data.list;
          this.checkRole=resp.data.data.roleIds;
        })
      },
      //确认分配角色
      confirmRoles(){
        this.$http.post("/system/api/user/qr?userId="+this.userId+"&roleIds="+this.checkRole,).then(resp=>{
          this.$message.success("分配成功");
          this.dialogVisible01=false;
        })
      },

      onSubmit(){
        this.initTable();
      },
      // onSubmit(){
      //     this.$http.post("http://localhost:8080/customer/findAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.customer).then(resp=>{
      //         if(resp.data.code==2000){
      //             this.tableData={};
      //             this.tableData=resp.data.data.list;
      //
      //             this.total=resp.data.data.total;
      //         }else if (resp.data.code==4001){
      //             this.$message.error("未登录");
      //             this.$router.push("/login");
      //         }
      //
      //     })
      //
      // },
      del(userId){
        this.$http.get("/system/api/user/delete?userId="+userId).then(resp=>{
          if(resp.data.code==2000){
            this.$message.success("删除成功");
            this.initTable();
          }
        })
      },
      xiugai(row){
        this.imageUrl=row.avatar;
        this.dialogVisible=true;
        this.userForm=row;
        this.$http.get("/system/api/user/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
          this.customers=resp.data.data.list.records;

        })

      },
      gai(){
        this.userForm.avatar=this.imageUrl;
        this.$http.post("/system/api/user/update",this.userForm).then(resp=>{
          if (resp.data.code==2000){
            this.$message.success("修改成功")
            this.dialogVisible=false;
            this.initTable();
          }
          this.userForm={};
        })
      },
      tianjia(){
        this.dialogVisible2=true;
        this.imageUrl="";
      },
      tian(){
        this.userForm2.avatar=this.imageUrl;
        this.$http.post("/system/api/user/insert",this.userForm2).then(resp=>{
          if (resp.data.code==2000){
            this.$message.success("添加成功")
            this.dialogVisible2=false;
            this.initTable();
          }
          this.userForm2={};
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
        this.userForm2={};
      },
      resetForm(){
        this.userForm2={};
      },

      handleSizeChange(val) {
        this.pageSize=val;
        this.initTable();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this.initTable();
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 10;

        // if (!isJPG) {
        //     this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      dialogClose(){
        this.imageUrl="";
        this.$refs.user.resetFields();
      },

    }
  }
</script>

<style scoped>

</style>
